<template>
  <div class="return-goods-main">
    <div class="return-type-wrap">
      <div class="return-type clear">
        <div class="to-store fl clear"><img src="../assets/image/widget@2x.png" class="fl"/><p class="fr">到店退货</p></div>
        <div class="express fr clear"><img src="../assets/image/widget_pre@2x.png" class="fl"/><p class="fr">快递退货</p></div>
      </div>
    </div>
    <div class="logisticsbar hidden">
      <p class="logistics-company"><span class="fl">物流公司</span><img src="../assets/image/ico_arrows@2x.png" class="fr"/></p>
      <P class="logistics-number">物流单号</P>
      <input type="text" value="123456444555" class="number-input"/>
    </div>
    <div class="store-msg">
      <p>门店名称：乐町女装旗舰店</p>
      <p>门店地址：广东省深圳市南山区阳光科创广东省深圳市南山区阳光科创</p>
      <p>门店电话：0755-8838388</p>
      <p>营业时间：周一，周二，周三，周四：10：00-22：00&nbsp;&nbsp;周五，周六，周日：7：00-24：00</p>
    </div>
    <div class="button-wrap"><button class="submit">提交</button></div>
    <!--物流公司弹窗-->
    <div class="popup hidden">
      <div class="popup-content">
        <p>选择快递</p>
        <p>圆通</p>
        <p>申通</p>
        <p>中通</p>
        <p>顺丰</p>
        <p>邮政</p>
        <p>韵达</p>
        <button>确定</button>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
    data () {
      return {

      }},
    name: 'app',
    methods: {}
  }
</script>
<style lang="scss">
  .return-goods-main{
    background: #fff;
    .return-type-wrap{width: 100%; border-top: 0.2rem solid #f4f5f5;}
    .return-type{
      width:4.44rem; padding:0.34rem 0; margin: 0 auto;
      div{
        width: 1.78rem;
        +div{margin-left: 0.88rem;}
        img{display: block; width: 0.32rem; height: 0.32rem;}
        p{height:0.32rem; font-size: 0.32rem; line-height: 0.32rem; color: #333;}
      }
    }
    .logisticsbar{
      height:3.82rem; border-top: 0.2rem solid #f4f5f5;
      .logistics-company{
        width: 100%; height:0.88rem;
        span{display: block; height: 0.28rem; padding: 0.3rem 0 0.3rem 0.3rem; font-size: 0.28rem; line-height: 0.28rem; color: #333;}
        img{display: block; width:0.14rem; height: 0.28rem; padding: 0.3rem 0.3rem 0.3rem 0;}
      }
      .logistics-number{width: 100%; height: 0.88rem; font-size: 0.28rem; text-indent: 0.3rem; line-height: 0.88rem; color: #333;}
      .number-input{display: block; width: 6.2rem; height: 0.78rem; margin: 0 auto; padding:0 0.2rem; border: 0; border-radius: 0.08rem; font-size: 0.28rem; line-height: 0.78rem; background: #f4f5f5; color: #333;}
    }
    .store-msg{
      height: 3.82rem; width: 100%; border-top: 0.2rem solid #f4f5f5;
      p{padding:0 0.3rem; margin-top:0.28rem; font-size: 0.28rem; line-height: 0.38rem; color: #333;}
    }
    .button-wrap{width: 100%;}
    .submit{display:block; width: 6.2rem; height: 0.88rem; margin: 0 auto; border-radius: 0.1rem; font-size: 0.28rem; text-align: center; line-height: 0.88rem; background: #fe4a6b; color: #fff;}
    .popup{width: 100%; height: 100%; background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0; z-index: 20;}
    .popup-content{
      position:absolute; left:0; bottom:0; width: 100%; max-height: 7.16rem; background:#fff;
      p{
        margin: 0 0.3rem; height: 0.88rem; font-size: 0.28rem; line-height: 0.88rem; color: #585757;
        +p{border-top: 0.02rem solid #eee;}
      }
      button{display:block; width: 100%; height: 0.88rem; font-size: 0.28rem; text-align: center; line-height: 0.88rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f);}
    }
  }
</style>


























